<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Drawing and Copying to Images</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .image-container {
            width: 600px;
            margin: 5px;
            border: 1px solid #888;
        }
    </style>
</head>
<body>

<div id="container"></div>
<canvas id="large-canvas" width="600" height="4000" style="display:none;"></canvas> <!-- 隐藏的大画布 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    var largeCanvas = document.getElementById('large-canvas');
    var largeCtx = largeCanvas.getContext('2d');
    var container = document.getElementById('container');
    var numCanvases = 5;
    var numNumbers = 60;
    var segmentHeight = largeCanvas.height / numNumbers;

    // 在隐藏的大画布上绘制数字
    for (var i = 1; i <= numNumbers; i++) {
        var fontSize = Math.random() > 0.5 ? 30 : 60;
        largeCtx.font = fontSize + 'px Arial';
        var yPos = segmentHeight * i - segmentHeight / 2;
        largeCtx.fillText(i, 50, yPos);
    }

    // 创建图片并显示
    for (var j = 0; j < numCanvases; j++) {
        var image = new Image();
        image.className = 'image-container';
        var sourceY = (j * largeCanvas.height) / numCanvases;
        // 创建用于复制的临时canvas
        var tempCanvas = document.createElement('canvas');
        tempCanvas.width = 600;
        tempCanvas.height = 800;
        var tempCtx = tempCanvas.getContext('2d');
        // 复制大画布的对应部分到临时canvas
        tempCtx.drawImage(largeCanvas, 0, sourceY, 600, 800, 0, 0, 600, 800);
        // 将临时canvas转换为图片并添加到页面
        image.src = tempCanvas.toDataURL('image/png');
        container.appendChild(image);
    }
});
</script>

</body>
</html>
